<template>
  <BasicContainer>
    <ElCard class="box-card">
      <template #header>
        <div class="clearfix">
          <span>请假流程信息</span>
        </div>
      </template>
      <div class="text item" style="font-size: 14px">
        <ElForm ref="dataForm" :model="dataForm" label-width="80px" :disabled="disabled">
          <ElFormItem label="类型" prop="region">
            <ElRadioGroup v-model="dataForm.type">
              <ElRadioButton label="1">调体</ElRadioButton>
              <ElRadioButton label="2">事假</ElRadioButton>
              <ElRadioButton label="3">年假</ElRadioButton>
            </ElRadioGroup>
          </ElFormItem>

          <ElFormItem label="开始时间" prop="startTime">
            <ElDatePicker
              v-model="dataForm.startTime"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="date"
              placeholder="开始时间" />
          </ElFormItem>

          <ElFormItem label="结束时间" prop="endTime">
            <ElDatePicker
              v-model="dataForm.endTime"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="date"
              placeholder="结束时间" />
          </ElFormItem>
          <ElFormItem
            label="请假天数"
            prop="days"
            :rules="[
              { required: true, message: '请假天数不能为空' },
              { type: 'number', message: '请假天数必须为数字值' }
            ]">
            <ElInput v-model.number="dataForm.days" type="age" autocomplete="off" />
          </ElFormItem>
          <ElFormItem label="说明" prop="note">
            <ElInput v-model="dataForm.note" type="textarea" rows="3" placeholder="说明" />
          </ElFormItem>
        </ElForm>
        <ElButton v-if="dataForm.status != 2" type="success" plain @click="doRetract()">撤回</ElButton>
        <ElButton type="success" plain @click="doBpmnPreview()">查看流程图</ElButton>
      </div>
    </ElCard>

    <ApprovalCommentRecord ref="approvalCommentRecord" :process-instance-id="procInstId" />
    <!-- 流程图 -->
    <FlowProgressViewDialog
      ref="bpmnPreviewModal"
      :visible.sync="visiblePreview"
      :model-key="routeParams.modelkey"
      :proc-inst-id="procInstId" />
  </BasicContainer>
</template>

<script>
  import { getObj } from '@/api/admin/leave'
  import { complete, revokeProcess } from '@/api/admin/workitem'
  import ApprovalCommentRecord from '@/module/process/components/ApprovalCommentRecord'

  export default {
    components: { ApprovalCommentRecord },
    data() {
      return {
        visible: false,
        canSubmit: true,
        disabled: true,
        dataForm: {
          id: 0,
          processInstanceId: '',
          applyerCode: '',
          title: '',
          type: '',
          days: '',
          startTime: '',
          endTime: '',
          companyId: '',
          companyName: '',
          deptId: '',
          deptName: '',
          note: '',
          createTime: '',
          creator: '',
          updateTime: '',
          updator: '',
          status: 0
        },
        approveMsg: '',
        procInstId: -1,
        visiblePreview: false,
        routeParams: {
          taskId: '',
          procInstId: '',
          businessKey: '',
          activityId: '',
          activityName: '',
          modelkey: ''
        }
      }
    },
    created() {
      this.routeParams = this.$route.params
      this.procInstId = this.routeParams.procInstId
      this.taskId = this.routeParams.taskId
      this.init(this.$route.params.businessKey)
    },
    methods: {
      init(id) {
        this.dataForm.id = id || 0
        this.visible = true
        this.canSubmit = true
        this.$nextTick(() => {
          this.$refs.dataForm.resetFields()
          if (this.dataForm.id) {
            getObj(this.dataForm.id).then(response => {
              this.dataForm = response.data.data
            })
          }
        })
      },
      handleChange(val) {
        // console.log(val)
      },
      doApprove() {
        if (this.$isBlank(this.approveMsg)) {
          this.$message.warning('请输入审批意见！')
          return
        }
        const taskId = this.$route.params.taskId
        const procInstId = this.$route.params.procInstId
        const params = { taskId, processInstanceId: procInstId, message: this.approveMsg }
        complete(params).then(response => {
          if (response.data.success) {
            this.$message.warning('审批成功。')
          }
        })
      },
      doRetract() {
        const data = {
          message: '撤回',
          activityId: this.routeParams.activityId,
          activityName: this.routeParams.activityName,
          taskId: this.taskId,
          processInstanceId: this.procInstId,
          processStatusEnum: 'CH'
        }
        this.$confirm('是否撤回该任务？', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          revokeProcess(data).then(response => {
            if (response.data.success) {
              this.$message.success('撤回成功！')
              this.$closeTab(this.tag)
              this.$router.go(-1)
            }
          })
        })
      },
      doBpmnPreview() {
        this.visiblePreview = true
      }
    }
  }
</script>
